import React, { useEffect, useState } from 'react';
import CandleStickChart from "@src/components/HighCharts/StockChart";
import { getOhlcv } from "@src/services/bookPirceStat";

const TreasureBox = () => {
    const [intervalStatData, setIntervalStatData] = useState([]);

    const onLoad = async (frequency = '1') => {
        const intervalStat = await getOhlcv();
        if (intervalStat) {
            setIntervalStatData(intervalStat);
        }
    };

    useEffect(() => {
        onLoad(); // Load data once when the component mounts
    }, []); // Empty dependency array ensures this runs only once

    return (
        <div style={{ width: '100%', height: '500px' }}>
            <CandleStickChart trendData={intervalStatData} sysmbol='BTC/USDT'/>
            <CandleStickChart trendData={intervalStatData} sysmbol='DOGE/USDT'/>
            <CandleStickChart trendData={intervalStatData} sysmbol='ETH/USDT'/>
        </div>
    );
};

export default TreasureBox;
